
<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <#assign base=request.contextPath  />
    <title>数据统计</title>
    <link rel="stylesheet" href="${base}/js/layui/css/layui.css" media="all">
    <script src="${base}/js/layui/echarts.common.min.js"></script>
    <script src="${base}/js/zhang.js"></script>
    <style type="text/css">
        .tk5{

            margin: 0;
            border: solid 2px #4BB2FF;

            position: absolute;
            left: 30%;
            bottom: 30%;
            background: white;
            line-height: 40px;
            margin-left: 10px;
            display: none;
            font-size:16px;
        }
        button{
            border-radius: 10px  10px  10px  10px;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>客户餐单统计</legend>
</fieldset>
<div style="padding: 20px;">
    <button class="layui-btn layui-btn-warm btn4" type="button" style=" width:200px;background-color: #4BB2FF;">客户餐单显示</button>
</div>
</div>
<div id="main" style="width: 1000px;height:500px;padding: 20px;"></div>
<div class="tk5">
    <div style="height:40px;text-align: center; color: white; background-color: #4BB2FF;" >
        客户餐单统计
    </div>
    <form action=""   method="get" style="padding: 40px;">
        <div id="tankuang2">
            <div >
                <label>房间ID:</label>
                <select name="type" id="home">
                </select>
            </div>
            <div >
                <label>餐单名:</label>
                <select name="type" id="vegetable" >
                </select>
            </div>

            <div>评价:
                <div id="pingfen"></div>
            </div>

            <div style="text-align: center;">
                <button class="layui-btn layui-btn-warm" style="background-color: #4BB2FF;" type="button" onclick="menu()">提交</button>
                <input type="button" value="取消" class="layui-btn layui-btn-warm"style="background-color: #4BB2FF;" onclick="reload();"></input>

            </div>
    </form>
</div>

<script src="${base}/js/layui/layui.js " charset="utf-8"></script>
<script src="${base}/js/jquery.min.js"></script>

<script>

    var bas="${base}"
    var home_data=getDataByDicCode(bas,"home")
    for(var i=0;i<home_data.length;i++){
        $("#home").append(
                '  <option value="'+home_data[i].id+'">'+home_data[i].name+'</option>'
        )
    }

    var bas1="${base}"
    var vegetable_data=findVariety()
    for(var i=0;i<vegetable_data.length;i++){
        $("#vegetable").append(
                '<option value="'+vegetable_data[i].id+'">'+vegetable_data[i].vegetable+'</option>'
        )
    }




    //星级评价
    function menu(){
        var star=0;
        $(".layui-rate").each(function(){
            $(this).find('li').find('i').each(function() {
                if($(this).attr("class")=='layui-icon layui-icon-rate-solid'){
                    star+=1;
                }
            });
        });
        alert("当前选择："+star+"星")


        var home =$("#home").val();
        var vegetable =$("#vegetable").val();
        $.ajax({
            type:"POST",
            url:"${base}/menuEvaluate/addMenuEvaluate",
            data:{"roomId":home,"star":star,"menuId":vegetable},
            success : function(data){
                $(".tk5").hide(200)
                initChar();
            }
        });


    }


    function findVariety(){
        var resultdata;
        $.ajax({
            type:"POST",
            url:"${base}/menuEvaluate/findAllVariety",
            async:false,
            success : function(data){
                resultdata=data;
            }
        });
        return resultdata;
    }


    //清空
    initChar();
    function initChar(){
        data2Arr=[];
        data1Arr=[];
        $.ajax({
            type : "POST", //提交方式
            url : "${base}/menuEvaluate/countMenuEvaluateStar",//路径
            async:false,
            success : function(data) {//返回数据根据结果进行相应的处理
                for(var i=0;i<data.length;i++){
                    data2Arr.push(data[i].star);
                    data1Arr.push(data[i].menu);
                }

                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value'

                    },
                    yAxis: {
                        type: 'category',
                        data: data1Arr
                    },
                    series:{
                        name: '搜索引擎',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: data2Arr
                    }
                };
                myChart.setOption(option);

            }
        });
    }

    $(".btn4").click(function(){
        $(".tk5").show(200)
    }),
            layui.use(['rate'], function(){
                var rate = layui.rate;
                rate.render({
                    elem: '#pingfen',
                    theme: '#FE0000'
                })

            });

    function reload(){
        $(".tk5").hide(200);
    }


</script>
</body>
</html>